<template>
  <section v-if="trackType">
    <el-tooltip v-if="hasDeviceCode"
                class="item"
                effect="dark"
                :content="trackTypeName"
                placement="top">
      <icon-svg class-name="iconClass"
                :icon-name="iconName" />
    </el-tooltip>
    <br />
    <div>{{ normalizedDeviceCode }}</div>
  </section>
  <section v-else>--</section>
</template>

<script>
// DEVICE(1, "电子回单"), EXPRESS(2, "快递单号");
const TRACK_TYPES = {
  1: '电子回单',
  2: '快递单号',
}
export default {
  name: "TrackingLink",
  data () {
    return {};
  },
  props: {
    trackType: {
      type: [String, Number]
    },
    deviceCode: {
      type: String
    }
  },
  computed: {
    trackTypeName () {
      return TRACK_TYPES[this.trackType] || ''
    },
    normalizedDeviceCode () {
      return this.hasDeviceCode ? this.deviceCode : '--'
    },
    hasDeviceCode () {
      return this.deviceCode && this.deviceCode != 'undefined'
    },
    iconName () {
      return this.trackType === 2 ? 'kuaididanhao' : 'dianzihuidan'
    }
  }
};
</script>
<style scoped>
.iconClass {
  width: 16px;
  height: 16px;
  /* font-size: 16px; */
}
</style>
